import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Select} from 'antd';
import {FontIcon} from 'zk-tookit/antd';
import service from '../../../services/service-hoc';

const Option = Select.Option;

@service()
export default class <%= capitalName %>Select extends Component {
    static defaultProps = {
        showDisabled: false,
        onLoaded: () => {
        },
    };

    static propTypes = {
        showDisabled: PropTypes.bool,
        onLoaded: PropTypes.func,
    };

    state = {
        options: [],
    };

    componentWillMount() {
        this.props.$service.<%= lowercaseName %>Service
            .getAll()
            .then(list => {
                let options = [];
                if (list && list.length) {
                    // TODO 修改item.id item.name item.isEnable
                    options = list.map(item => {
                        const disabled = item.isEnable !== 1;
                        const value = item.id;
                        const name = item.name;
                        const label = disabled ?
                            (
                                <span>
                                    {name}
                                    <FontIcon style={{marginLeft: 8, color: 'red'}} type="fa-ban"/>
                                </span>
                            )
                            : name;
                        return {
                            label,
                            value,
                            disabled,
                        };
                    });
                }
                this.props.onLoaded(options, list);
                this.setState({options});
            });
    }

    render() {
        let {options} = this.state;
        if (!this.props.showDisabled) {
            let {value} = this.props;
            if (value) {
                // 会有多选情况
                value = Array.isArray(value) ? value : [value];
                options = options.filter(item => !item.disabled || value.find(i => i === item.value));
            } else {
                options = options.filter(item => !item.disabled);
            }
        }
        return (
            <Select {...this.props}>
                {
                    options.map(item => <Option key={item.value} disabled={item.disabled} value={item.value}>{item.label}</Option>)
                }
            </Select>
        );
    }
}
